<template>
    <div class="container">
        <!-- 顶部banner -->
        <div class="banner" v-loading="bannerLoading" style="width:50%">
            <el-carousel v-show="bannerList && bannerList[0].banner" :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in bannerList" :key="item.id">
                    <!-- <h3 text="2xl" justify="center">{{ item.name }}</h3> -->
                    <!-- <el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom"> -->
                    <el-image :src="item.banner" fit="contain" @click="clickBanner(item.id)">
                        <template #error>
                            <div class="image-slot">
                                <el-icon><icon-picture /></el-icon>
                            </div>
                        </template>
                        
                    </el-image>

                    <!-- </el-tooltip> -->
                    
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 功能搜索区 -->
        <div class="bar">
            <div style="margin:20px 0">
                <div class="block" style="margin: 10px;">
                    <!-- <span class="demonstration">Default</span> -->
                    <el-date-picker v-model="searchDate" :default-time="defaultTime" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD HH:mm:ss" @blur="dateBlur" :disabled-date="disabledDate"
                        type="daterange" range-separator="To" start-placeholder="入住日期" end-placeholder="离开日期"
                        size="default" />
                </div>
                <el-select v-model="searchValue" @change="handleChange" class="m-2" placeholder="搜索类型" size="small"
                    style="width:100px;margin-right: 10px;">
                    <el-option v-for="item in searchOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-input placeholder="默认搜索民宿类型" v-model="search" clearable
                    style="width:200px;margin-right: 10px;"></el-input>
                <!-- <el-icon><icon-picture /></el-icon> -->

                <el-button type="primary" @click="currentPage = 1, tableData=[],load()">搜索</el-button>
            </div>
        </div>
        <!-- 房间展示区 -->
        <div class="list" style="width:76%">
            <el-row :gutter="30" v-loading="listLoading">
                <el-col  v-infinite-scroll="infinite" v-for="item in tableData" :key="item.id" :span="6"
                    style="margin-bottom:30px">
                    <el-card shadow="hover" @click="toDetail(item.id)" :body-style="{ padding: '0px' }" style="cursor: pointer;max-height: 60vh;">
                        <div class="img" style="padding: 10px;max-height: 360px;">
                            <el-image slot="error" :src="item.banner" style="height:250px" fit="contain">
                                <!-- <template #error>
                                    <el-icon><icon-picture /></el-icon>
                                    666
                            </template> -->
                            </el-image>
                        </div>
                        <div style="padding: 14px;">
                            <div style="display: flex;">
                                <div><span>{{ item.name }}</span></div>
                                <div style="flex: 1;">id:{{item.id}}</div>
                                <div style="font-size: 12px;">样式：<span>{{ item.category }}</span></div>
                            </div>
                            <div style="display: flex;;font-size: 12px;">
                                设施：{{ item.device }}/
                                可住人数：{{ item.seat }}
                                权重：{{ item.weight }}
                            </div>
                            <div style="display: flex;;font-size: 12px;">
                                地址：{{ item.city }}
                            </div>
                            <div v-show=" item.state != '空闲' &&item.endTime > searchDate[0]" class="tips" style="color: red;">
                               该时间段已有人预订
                            </div>
                            <!-- <div class="bottom">
                                <time class="time">{{ currentDate }}</time>
                                <el-button text class="button">Operating</el-button>
                            </div> -->
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <p v-if="listLoading">Loading...</p>
            <p v-if="noMore">No more</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import request from '@/utils/request';
import { ElMessage } from 'element-plus'
import { onMounted, ref, computed } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
onMounted(() => {
    initBanner()
    load()
})

// 分页
const currentPage = ref(1)
const pageSize = ref(50)
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => { //改变每页数量
    console.log(`${val} items per page`)
    load()
}
const handleCurrentChange = (val: number) => { //改变当前页码位置
    console.log(`current page: ${val}`)
    load()
}
// banner列表，先定义一个空对象，防止第一张图不显示
const bannerList = ref([
    {
        id: '',
        banner: ''
    }
])
const initBanner = () => {
    request.get('/h/room/getBanner', {
        params: {
            num: 6,
        }
    }).then((res: any) => {
        if (res.code === '200') {
            bannerList.value = res.data.records
            bannerLoading.value = false
        } else {
            ElMessage.error('未获取到对应房间信息')
        }
    })
}
//加载动画
const bannerLoading = ref(true)
const listLoading = ref(true)
// 条件搜索
const searchValue = ref('')
const searchOptions = [
    {
        value: 'name',
        label: '民宿名称',
    },
    {
        value: 'category',
        label: '民宿类型',
    },
    {
        value: 'device',
        label: '设施',
    },
    {
        value: 'city',
        label: '城市',
    }
]
const handleChange = (value: any) => {
    // console.log(value)
    searchType.value = value
}

// 日期选择器的处理
const searchDate = ref([])
const disabledDate = (time: Date) => {
    // 禁用今天以及之前的日期
    // return time.getTime() < Date.now()
    // 禁用昨天及之前的日期
    return time.getTime() < Date.now() - 24 * 60 * 60 * 1000

}
const dateChoose = ref([])
const dateBlur = (e: FocusEvent) => {
    console.log(searchDate.value[0]);
    console.log(searchDate.value[1]);

}
const defaultTime = ref<[Date, Date]>([
    // 选择日期后开始/结束日期默认的时分秒
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

// 房间列表数据初始化
const tableData = ref([
    {
        id: '',
        name: '',
        category: '',
        device: '',
        state: '',
        seat: '',
        banner: '',
        weight: '',
        endTime: '',
    }
])
const search = ref()
const searchType = ref()
const load = () => {
    if (currentPage.value >= 20) { return }
    request.get('/h/room/searchPage', {
        params: {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            search: search.value,
            searchType: searchType.value,
            startTime:searchDate.value[0],
            endTime:searchDate.value[1],
        }
    }).then((res: any) => {
        if (res.code === '200' && res.data.records.length > 0) {
            // console.log(res.data.records);
            // console.log(currentPage.value);
            if (currentPage.value == 1) {
                tableData.value = res.data.records
            } else {
                res.data.records.forEach((item: any) => {
                    tableData.value.push(item)
                });
            }
            total.value = res.data.total
            listLoading.value = false
        }
    })
}

// const currentDate = ref(new Date())
// 无限滚动
const infinite = () => {
    // 页码加1
    // console.log(currentPage.value);
    // console.log(noMore.value);
    if (noMore) {
        // currentPage.value += 1
        // load()
        setTimeout(() => {
            currentPage.value += 1
            load()
        }, 1000)
    }
}
const noMore = computed(() => currentPage.value >= 20)

// 详情页跳转
const router = useRouter()
const toDetail = (id: any) => {
    // console.log(id);
    // 对象传参
    // router.push({
    //     path: '/detail',
    //     query: {id: id},
    // })
    // router.push(`/detail?id=${id}`)
    router.push({
        name: 'detail',
        params: {id: id},
    })
}
// 点击banner图片事件
const clickBanner = (id: any) => {
    toDetail(id)
    
}

</script>

<style  scoped>
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}
</style>